<template>
  <div>
    <div>欢迎光临_vue开发的收银系统_水果店</div>
    <div>苹果10¥/斤，折扣8折</div>
    <div>
      请输入你要购买的斤数<input type="text" v-model="num" />
    </div>
    <div><button @click="btn">结账买单</button></div>
    <div v-html="str"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: '<span>结账单：总价0元，折后价：0元，省了0元</span>',
      num: '0',
    }
  },
  methods: {
    btn() {
      this.str = `<span>结账单：总价${this.num * 10}元，折后价：${
        this.num * 10 * 0.8
      }元，省了${this.num * 10 * 0.2}元</span>`
    },
  },
}
</script>

<style></style>
